import React from 'react';
import { Form, Input, Select, DatePicker, InputNumber, Row, Col } from 'antd';
import dayjs from 'dayjs';

const { Option } = Select;
const { TextArea } = Input;

export default function ProjectBasicInfo({ form, projectData }) {
  return (
    <div>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="projectName"
            label="项目名称"
            rules={[{ required: true, message: '请输入项目名称' }]}
          >
            <Input placeholder="请输入项目名称" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="projectName"
            label="项目名称"
            rules={[{ required: true, message: '请输入项目名称' }]}
          >
            <Input placeholder="请输入项目名称" />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="customer"
            label="客户"
            rules={[{ required: true, message: '请选择客户' }]}
          >
            <Select placeholder="请选择客户">
              <Option value="阿里巴巴集团">阿里巴巴集团</Option>
              <Option value="腾讯科技">腾讯科技</Option>
              <Option value="百度在线">百度在线</Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="company"
            label="公司"
            rules={[{ required: true, message: '请选择公司' }]}
          >
            <Select placeholder="请选择公司">
              <Option value="凯泽利科技股份有限公司">凯泽利科技股份有限公司</Option>
              <Option value="凯泽利北京分公司">凯泽利北京分公司</Option>
            </Select>
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="startDate"
            label="开始日期"
            rules={[{ required: true, message: '请选择开始日期' }]}
          >
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="endDate"
            label="结束日期"
            rules={[{ required: true, message: '请选择结束日期' }]}
          >
            <DatePicker style={{ width: '100%' }} />
          </Form.Item>
        </Col>
      </Row>

      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="budget"
            label="项目预算"
            rules={[{ required: true, message: '请输入项目预算' }]}
          >
            <InputNumber
              style={{ width: '100%' }}
              formatter={value => `¥ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
              parser={value => value.replace(/¥\s?|(,*)/g, '')}
              placeholder="请输入项目预算"
            />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="projectManager"
            label="项目经理"
            rules={[{ required: true, message: '请选择项目经理' }]}
          >
            <Select placeholder="请选择项目经理">
              <Option value="张三">张三</Option>
              <Option value="李四">李四</Option>
            </Select>
          </Form.Item>
        </Col>
      </Row>

      <Form.Item
        name="description"
        label="项目描述"
      >
        <TextArea rows={4} placeholder="请输入项目描述" />
      </Form.Item>
    </div>
  );
}
